import { useIntl, useModel } from "@umijs/max"
import { App, Button, Card, Row, Select } from "antd"
import React, { useState } from "react"
import OrderForm from "./OrderForm"

const OrderManager: React.FC = () => {
  const { callPy } = useModel("websocketModel")
  const { message } = App.useApp()
  const [searchId, setSearchId] = useState<string>("")
  const { searchOrders, totalOrders, showTotalOrders, updateProduceData } =
    useModel("produceModel")
  const intl = useIntl()

  const onOrderSelectChange = (value: string) => {
    setSearchId(value)
  }

  const clickSearch = async () => {
    const response = await callPy("db", "search_order_from_web", [searchId])
    if (response.state) {
      message.success(intl.formatMessage({ id: "orderManager.searchSuccess" }))
      updateProduceData({
        searchOrders: response.data,
        showTotalOrders: false,
        orderChoosed: searchOrders[0]
      })
    } else {
      message.error(
        intl.formatMessage({ id: "orderManager.searchFail" }) + response.info,
        5
      )
    }
  }

  const clickHistory = async () => {
    updateProduceData({ showTotalOrders: true, isOperateMode: true })
    const response = await callPy("db", "query_history_from_web", [])
    if (response.state) {
      message.success(intl.formatMessage({ id: "orderManager.historySuccess" }))
    } else {
      message.error(
        intl.formatMessage({ id: "orderManager.historyFail" }) + response.info,
        5
      )
    }
  }

  return (
    <div>
      <Row
        style={{ display: "flex", marginTop: 10, alignItems: "stretch", width: "100%" }}
      >
        <Card
          title={
            <span style={{ color: "#595959" }}>
              {intl.formatMessage({ id: "orderManager.title" })}
            </span>
          }
          style={{ marginTop: 5, width: "100%" }}
          extra={
            <div
              style={{
                marginRight: 900,
                display: "flex",
                alignItems: "center"
              }}
            >
              <span style={{ marginRight: 5 }}>
                {intl.formatMessage({ id: "orderManager.inputOrderId" })}
              </span>
              <Select
                showSearch
                style={{ width: 200 }}
                optionFilterProp="label"
                onChange={onOrderSelectChange}
                filterOption={(input, option) =>
                  option?.label?.toString().toLowerCase().includes(input.toLowerCase()) ??
                  false
                }
                options={totalOrders.map((order) => ({
                  value: order.orderId,
                  label: order.orderId,
                  key: order.key
                }))}
              />

              <Button
                type="primary"
                onClick={clickSearch}
                style={{ marginLeft: 15, marginRight: 15 }}
              >
                {intl.formatMessage({ id: "orderManager.search" })}
              </Button>
              <Button type="primary" onClick={clickHistory}>
                {intl.formatMessage({ id: "orderManager.history" })}
              </Button>
            </div>
          }
        >
          <OrderForm />
        </Card>
      </Row>
    </div>
  )
}
export default () => (
  <App>
    <OrderManager />
  </App>
)
